<template>
  <div class="past-logs-box">
    <div class="title">
      <div class="b"></div>
      <div class="w">
        <div class="pn">
          <van-dropdown-menu active-color="#1ab57f">
            <van-dropdown-item v-model="targetPro" :options="proName" />
          </van-dropdown-menu>
        </div>
        <div class="rz">
          项目日志
        </div>
      </div>
    </div>
    <div class="btm">
      <div class="content-item" v-for="(item,index) in historyUpdate" :key="index">
        <div class="content-info">
          <div class="first">
            <div class="second">
              上传时间：
            </div>
            <div class="third">
              {{item.date}} {{item.time}}
            </div>
          </div>
          <div class="fifth">
            <div class="seventh">
              上传人员：
            </div>
            <div class="sixth">
               {{item.author}}
            </div>
          </div>
        </div>
        <div class="content">
          <div class="content-word">
            <div class="miaoshu">
              内容描述:
            </div>
            <div class="neirong">{{item.content}}</div>
          </div>
          <div class="content-img" v-for="(i,ind) in item.img" :key="ind">
            <img :src="item.img[ind]" alt="" @click="clickImg(item.img[ind])">
            <img :src="item.img[ind]" alt="" @click="clickImg(item)">
            <van-overlay :show="show" class="overlay">
              <div class="overlay-box">
                <van-icon
                  name="close"
                  size="30"
                  color="#fff"
                  @click="closeFn"
                  class="overlay-icon"
                />
                <img :src="preview ? preview : console.log('none')" alt="" ref="imgRef" class="overlay-img">
              </div>
            </van-overlay>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue"
import Hammer from 'hammerjs'


onMounted(()=>{
  imgHandler()
})
const proName = ref([
  { text: '2022年新宾高标准农田', value: 0 },
  { text: '项目2', value: 1 },
  { text: '项目3', value: 2 },
])
const targetPro = 0
const imgRef = ref()
const historyUpdate = [
  {
    date:'2024-1-11',
    time:'16:50',
    author:'张三',
    content:'机耕路换填',
    img:[require("@/assets/images/ProjectImages/p1.jpg"),require("@/assets/images/ProjectImages/p2.jpg"),require("@/assets/images/ProjectImages/p3.jpg")],
  },{
    date:'2024-1-11',
    time:'16:50',
    author:'张三',
    content:'石笼网',
    img:[require("@/assets/images/ProjectImages/p4.jpg")]
  },{
    date:'2024-1-11',
    time:'16:50',
    author:'张三',
    content:'机耕路平整',
    img:[require("@/assets/images/ProjectImages/p5.jpg"),require("@/assets/images/ProjectImages/p6.jpg")]
  },
]
let scaleIndex
let scaleCount
let preview
const show = ref(false)

// 监听图片操作
const imgHandler = () => {
  nextTick(() => {
    let x = 0;
    let y = 0;
    let _node = imgRef.value; // 获取之前在模板中设置的ref属性
    if(_node){
      let hand = new Hammer(_node); // 创建一个新的Hammer实例，传入要进行手势操作的元素

      // 启用pinch手势
      hand.get('pinch').set({ enable: true });

      // 监听pinch手势的不同事件，用于实现缩放功能
      hand.on("pinchmove pinchstart pinchin pinchout", e => {
        if (e.type === "pinchstart") {
          scaleIndex = scaleCount || 1; // 记录当前的缩放比例
        }
        scaleCount = scaleIndex * e.scale; // 计算新的缩放比例
        _node.style.transform = "scale(" + (scaleIndex * e.scale) + ")"; // 应用缩放效果
      });

      // 监听doubletap手势，用于双击重置缩放和位置
      hand.on('doubletap', (e) => {
        x = 0;
        y = 0;
        scaleCount = 1; // 重置缩放比例为1
        _node.style.transform = "translateX(0px) translateY(0px) scale(1)"; // 重置位置和缩放效果
      });

      // 监听pan手势，用于实现拖动功能
      hand.on('panright panleft panup pandown', (e) => {
        _node.style.transform = "translateX(" + (e.deltaX + x) + "px)" + "translateY(" + (e.deltaY + y) + "px)" + "scale(" + (scaleCount * e.scale) + ")"; // 应用拖动和缩放效果
      });

      // 监听panend手势，用于记录拖动的偏移量，以便在下一次拖动时保持连续性
      hand.on('panend', (e) => {
        x = e.deltaX + x; // 记录水平方向上的偏移量
        y = e.deltaY + y; // 记录垂直方向上的偏移量
      });
    }
  })
}
// 关闭预览
const closeFn = () => {
  show.value = false
}
// 开始预览
const clickImg = (src) => {
  // console.log('src',src)
  preview = src
  show.value = true
}
</script>

<style scoped lang="less">
.past-logs-box {
  margin: 50px auto 50px auto;
  width: 98%;
  height: auto;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fff;
  overflow-y: scroll;
  .title {
    height: 100px;
    display: flex;
    justify-content: left;
    margin-left: 15px;
    margin-top: 30px;
    align-items: center;
    margin-bottom: 40px;
    .b{
      height: 70px;
      background-color: #1dcf91;
      width: 8px;
      margin-right: 15px;
      line-height: 50px;
    }
    .w{
      line-height: 50px;
      font-size: 35px;
      letter-spacing: 3px;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      align-items: start;
      height: 80px;
      .pn{
        font-size: 33px;
        letter-spacing: 1px;
      }
      .rz{
        margin-top: 5px;
        padding-left: 15px;
      }
    }
  }
  .btm{
    .content-item{
      margin: 0 auto;
      width: 98%;
      padding: 50px 0;
      border: 1px solid #dbdbdb;
      border-radius: 20px;
      margin-bottom: 40px;
      box-shadow: 0px 0px 15px 5px #d6d6d6;
      background-color: #fafafa;
      &:first-child{
        padding-top: 20px;
      }
      .content-info{
        box-sizing: border-box;
        margin: 10px 40px;
        padding-bottom: 35px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        border-bottom: 1px solid lightgray;
        //font-weight: 600;
        .first{
          display: flex;
          width: 100%;
          align-items: baseline;
          margin-bottom: 15px;
          .second{
            text-align: left;
            width: 35%;
          }
          .third{
            width: 100%;
            text-align: left;
          }
          div{
            margin-right: 15px;
          }
        }
        .fifth{
          width: 100%;
          display: flex;
          .seventh{
            width: 35%;
            text-align: left
          }
          .sixth{
            width: 100%;
            text-align: left;
          }
        }
      }
      .content{
        .miaoshu{
          margin: 20px;
          font-size: 32px;
          font-weight: 600;
          text-align: left;
          padding-left: 30px;
        }
        .neirong{
          margin: 40px 0;
          text-align: left;
          padding-left: 50px;
          font-size: 30px;
        }
        .content-word{
          margin-top: 20px;
        }
        .content-img{
          img{
            width: 85%;
            margin-bottom: 10px;
          }
          //遮罩
          .overlay{
            width: 100%;
            .overlay-box{
              width: auto;
              margin-top: 350px;
              height: auto;
              .overlay-icon{
                position: absolute;
                right: 55px;
              }
              .overlay-img{
              }
            }
          }
        }
      }
    }
  }
}
/deep/.van-dropdown-menu__bar{
  box-shadow: none !important;
}
/deep/.van-dropdown-menu__bar{
  box-shadow: none !important;
}
/deep/.van-dropdown-menu__bar {
  height: 30px !important;
}
</style>